<template>
  <div class="demo-tabs-style1">
    <Tabs
      type="card"
      :closable="true"
      v-model="curTTabs"
      @on-tab-remove="handleTabRemove"
      :animated="false"
    >
        <TabPane :key="tab.name" :label="tab.label" :name="tab.name"  v-for="(tab) in activetTabs">
          <keep-alive>
            <component :is="tab.component"/>
          </keep-alive>
        </TabPane>
        <Dropdown slot="extra" transfer @on-click="handleTabsOpen">
        <a href="javascript:void(0)">
          <Icon type="md-add" :style="{color:'#ffffff'}"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem v-for="(tab) in normaltTabs" :key="tab.name" :name="tab.name">{{tab.label}}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </Tabs>
    <div v-if="activetTabs.length==0">
      <span>
        当前无活动标签
      </span>
    </div>
  </div>
</template>
<script>
import Tabs from "./tabs/uTopTabs";
import update from "lodash/update";
import filter from "lodash/filter";
import merge from "lodash/merge";
import findIndex from "lodash/findIndex"
import FOREACH from "lodash/forEach"


export default {
  data() {
    return {
      tTabs:Tabs||{},
      // curTTabs:null
    };
  },
  computed: {
    normaltTabs:function (){
      return filter(Object.values(this.tTabs),'normal') 
    },
    activetTabs: function(){
      this.actionTabsStatus
      return filter(Object.values(this.tTabs),'active')
    },
    actionTabsStatus:function(){
      merge(this.tTabs,this.$store.getters.getActionTabsStatus)
      return 
    },
    curTTabs:{
      get(){
        return  this.$store.getters.getTabName
      },
      set(name) {
        this.$store.commit("SETTABNAME",name)
      }
      
    }
  },

  methods: {
    handleTabRemove(name) {
     if(-1 != findIndex(this.normaltTabs, function(o) { return o.name == name; })){
       this.tTabs[name].active = false
     }else{
       this.$store.dispatch("closeActionTab",name)
     }
      
    },
    handleTabsOpen(name) {
      this.tTabs[name].active = true
      this.curTTabs = name
    },
    upper(name, label, active=false, normal=false) {
      let attr = {
        label: label,
        active: active,
        normal: normal,
      };

       update(this.tTabs, name, (tab) => merge(tab, attr));
    },
  },
  created() {
    this.upper("trace", "通信记录", true,true);
    this.upper("transCtrl", "通信协议收发", true,true);
    this.upper("hardCfgEditer", "串口配置编辑器");
  },
  watch: {
  },
};
</script>
<style>
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
  height: 100%;
  margin-top: -16px;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  border-color: transparent;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  border-color: #fff;
}
</style>